<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>注册页面</title>
  <!-- 导入layui的css和js -->
  <link rel="stylesheet" href="/static/css/register.css">

<!--  错误验证样式-->
  <style>
  #error_msg{
    font-size: 10px;
    margin-left: 80px;
    color: orange;
    display: none;
  }
  #error_phone{
    font-size: 10px;
    margin-left: 80px;
    color: orange;
    display: none;
  }

  </style>


</head>

<body>
  <div id="header">
    <!--导航栏-->
    <div class="headerInner">
      <!--三个导航链接-->
      <div class="header_nav">

      </div>
      <!--登录，注册按钮-->
      <div class="header_login_reg">
        <a href="/login/">登&ensp;&ensp;录</a>

      </div>
      <!--网站logo-->
      <div class="header_logo">

        <img class="big_logo" src="/static/img/big_logo.png">

      </div>
    </div>
  </div>

  <!-- div居中效果  -->
  <div id="background">
    <div id="tp" class="tp_style">
      <div id="zc">注册</div>
      <form  id="register_form" action="">

        <div class="up_box">
          <label class="">账号名称</label>
          <div class="">
            <input type="text"  id="sname" placeholder="请输入账户名称" class="">
          </div>
        </div>

        <div class="up_box" v-show="isShow">
          <label class="">输入密码</label>
          <div class="">
            <input type="password" id="username1" placeholder="请输入密码" class="">
          </div>
        </div>

        <div class="up_box">
          <label class="">确认密码</label>
          <div class="">
            <input type="password" id="username2" placeholder="请确认密码" onblur="checkpsd()">
            <p id="error_msg">两次密码不一致 请重新输入！</p>
          </div>
        </div>

        <div class="up_box">
          <label class="">手机号码</label>
          <div class="">
            <input type="text" id="phone" placeholder="请输入手机号码" onblur="checkphone()">
            <p id="error_phone">手机号格式错误！请重新输入</p>
          </div>
        </div>

        <div class="up_box">
          <div class="">
            <input id="login_btn" type="button" value="注册" onclick="reg()">
          </div>
        </div>
      </form>

    </div>

  </div>
  </div>


  <div class="footer">
    <table border="0" cellspcing="0" cellpadding="0">
      <tr>
        <td><a href="">阿里巴巴集团</a></td>
        <td><a href="">全球购</a></td>
        <td><a href="">淘宝网</a></td>
        <td><a href="">天猫</a></td>
        <td><a href="">聚划算</a></td>
        <td><a href="">一淘</a></td>
        <td><a href="">阿里妈妈</a></td>
        <td><a href="">飞猪</a></td>
        <td><a href="">虾米</a></td>
        <td><a href="">阿里云计算</a></td>
        <td><a href="">支付宝</a></td>
        <td><a href="">联系我们</a></td>
      </tr>
    </table>
  </div>
<script>
<!--前端校验二次密码 以及 手机号格式-->
    function checkpsd(){
            if(document.getElementById("username1").value!=document.getElementById("username2").value){
            document.getElementById("error_msg").style.display = "block";
            <!--清空value值-->
            document.getElementById('username1').value = '';
            document.getElementById('username2').value = '';
          }
          else{
            document.getElementById("error_msg").style.display = "none";
          }
        }
    function checkphone(){
          var re = /^1[3,4,5,6,7,8,9][0-9]{9}$/;
          phone = document.getElementById("phone").value
          if (!re.test(phone)) {
              document.getElementById("error_phone").style.display = "block";
              document.getElementById('phone').value = '';
          }else{
            document.getElementById("error_phone").style.display = "none";
          }
    }
<!--ajax发送账号密码以及手机号 后端判断是否存在-->
    function reg(){
			//发送请求给后台并传参
			//1.创建请求对象
			var htp = new XMLHttpRequest();
			//绑定监听事件
			htp.onreadystatechange = function(){
				if (this.readyState==4&&this.status==200) {
					//console.log(this.responseText)
					alert(this.responseText)
					if (this.responseText=='注册成功！'){
					    window.location = 'http://127.0.0.1:8000/login'
					}
				}
			}
			//前端传参 DOM操作 获取节点元素 用户名 密码 手机号
			var username = document.getElementById('sname').value;
			var userpsd = document.getElementById('username2').value;
			var userphone = document.getElementById('phone').value;

			//3.设置请求信息 参数请求方式 路由 是否为异步 默认true
			//post方式请求 发送参数 需要设置请求的头部信息
			htp.open('POST','/register/');
			htp.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
			//发送请求
			htp.send('username='+username+'&userpsd='+userpsd+'&userphone='+userphone);
	}

  </script>
</body>

</html>